<template>
	<view>
		<image src="/static/common/bg1.png" class="pagebg1" mode=""></image>
		<view class="pagecon">
			<u-navbar :safeAreaInsetTop="true" leftIcon=" " :autoBack="false" :bgColor="'rgba(255,255,255,'+opc+')'"
				placeholder>
				<image @click="navto('/pages/address/address')" src="/static/my/wz.png" style="width: 42rpx;height: 42rpx;"
					slot='right' mode=""></image>
				<image @click="navto('/pages/personal/set')" src="/static/my/sz.png" style="width: 34rpx;height: 37rpx;margin-left: 20rpx;"
					slot='right' mode=""></image>
				
			</u-navbar>
			<view class="user" @click="navto('/pages/personal/information')">
				<image :src="userInfo.avatar?userInfo.avatar:'/static/goods/tx.png'" class="user__tx" mode="aspectFill">
				</image>
				<view class="" style="flex: 1;">
					<view class="u-flex u-flex-items-start" style="padding-top: 9rpx;">
						<view class="user__name">
							{{userInfo.username || '--'}}
						</view>
						<image src="/static/my/gd.png" class="user__gd" mode=""></image>
					</view>
					<view class="user__num">
						我的积分{{userInfo.score || 0}}/1000
					</view>
					<view class="user__pes">
						<view class="user__pes__a" :style="{'width':userInfo.score / 10 + '%' }">

						</view>
					</view>
				</view>

			</view>
			<view class="qbbox" @click="navtoU('/pages/personal/wallet')">
				<image src="/static/my/szbg.png" class="qbbox__bg" mode=""></image>
				<view class="qbbox__con">
					<view class="u-flex u-flex-column u-flex-center"
						style="height: 100%;padding-left: 25rpx;width: 265rpx;">
						<view class="qbbox__text">
							钱包余额
						</view>
						<view class="qbbox__num">
							{{userInfo.money || 0}}
						</view>
					</view>
					<view class="u-flex u-flex-column u-flex-center" style="height: 100%;padding-left: 25rpx;">
						<view class="qbbox__text">
							我的收入
						</view>
						<view class="qbbox__num">
							0.00
						</view>
					</view>
					<view class="qbbox__more">
						支出记录
					</view>
				</view>
			</view>
			<view class="orderbox">
				<image src="/static/my/ot.png" @click="navto('/pages/goods/orderlist?status=1')" class="orderbox__top"
					mode=""></image>
				<view class="u-flex u-flex-y-center">
					<view class="orderbox__item" v-for="(item,index) in orlist" :key="index"
						@click="navto('/pages/goods/orderlist?status='+item.status)">
						<image :src="'/static/my/o'+index+'.png'" class="orderbox__item__icon" mode=""></image>
						<view class="orderbox__item__text">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
			<view class="mybox">
				<view class="mybox__item" v-for="(item,index) in tlist" :key="index"
					@click="navto(item.url)">
					<image :src="'/static/my/t'+index+'.png'" :style="item.sty" mode=""></image>
					<view class="orderbox__item__text" style="margin-top: -2px;">
						{{item.text}}
					</view>
				</view>
			</view>
			<view class="" style="padding: 0 30rpx;">
				<u-swiper :list="list1" height="188rpx" radius="30rpx" bgColor="transparent"></u-swiper>
			</view>
			<view class="u-flex u-flex-xy-center">
				<image src="/static/my/tl.png" class="title__line" mode=""></image>
				<view class="title">
					推荐好物
				</view>
				<image src="/static/my/tr.png" class="title__line" mode=""></image>
			</view>
			<view class="u-flex u-flex-y-center u-flex-between u-flex-wrap" style="padding: 0 20rpx;">
				<proitem v-for="(item,index) in goodsList" :key="index" :info="item"></proitem>
			</view>
		</view>

		<tabbar :current="4"></tabbar>
	</view>
</template>

<script>
	import {
		getGoods,
	} from "@/request/api/goods.js"
	import {
		userInfo
	} from "@/request/api/my.js"
	export default {
		data() {
			return {
				list1: ['/static/my/mybanner.png'],
				goodsList: [],
				opc: 0,
				orlist: [{
						text: '待付款',
						status: 0
					},
					{
						text: '待发货',
						status: 1
					},
					{
						text: '待收货',
						status: 2
					},
					{
						text: '退换/售后',
						status: 3
					},
				],
				tlist: [{
						text: '我的视频',
						url: '/pages/personal/myhomepage',
						sty: 'width: 75rpx;height: 75rpx;'
					},
					{
						text: '购物车',
						url: '/pages/personal/car',
						sty: 'width: 65rpx;height: 70rpx;'
					},
					{
						text: '在线客服',
						url: '/pages/personal/customer',
						sty: 'width: 75rpx;height: 75rpx;'
					},
					{
						text: '我的收藏',
						url: '/pages/personal/collect',
						sty: 'width: 59rpx;height: 57rpx;margin-bottom:14rpx;'
					},
					
				],
				userInfo: {}
			};
		},
		onLoad() {
			uni.hideTabBar()
			
			this.getList()
		},
	
		onShow() {
			userInfo().then(res => {
				this.userInfo=res.data;
			})
		},
		onPageScroll(e) {
			if (e.scrollTop == 0) {
				this.opc = 0
			} else {
				this.opc = 1
			}
		},
		methods:{
			navto(url){
				uni.navigateTo({
					url
				})
			},
			navtoU(url){
				uni.$u.toast('开发中');
				return
			},
			getList() {
				this.goodsList = [];
				getGoods({
				}).then(res => {
					this.goodsList = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	.pagecon {}

	.user {
		padding: 10rpx 30rpx 30rpx;
		display: flex;

		&__tx {
			width: 92rpx;
			height: 92rpx;
			background: #5993FE;
			border-radius: 50%;
			margin-right: 24rpx;
		}

		&__name {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 800;
			font-size: 30rpx;
			color: #181818;
			line-height: 30rpx;
		}

		&__gd {
			width: 92rpx;
			height: 34rpx;
			margin-left: 9rpx;
		}

		&__num {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #432424;
			line-height: 20rpx;
			margin-top: 17rpx;
			margin-bottom: 9rpx;
		}

		&__pes {
			width: 221rpx;
			height: 4rpx;
			background: #FBC6BE;
			border-radius: 2rpx 2rpx 2rpx 2rpx;

			&__a {
				height: 4rpx;
				background: #E13F29;
				border-radius: 2rpx 2rpx 2rpx 2rpx;
			}
		}
	}

	.qbbox {
		margin: 0 21rpx 22rpx 31rpx;
		width: 698rpx;
		height: 140rpx;
		position: relative;

		&__bg {
			width: 698rpx;
			height: 140rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		&__con {
			width: 698rpx;
			height: 140rpx;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
		}

		&__text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #6E4C11;
			line-height: 24rpx;
			margin-bottom: 26rpx;
			margin-top: 10rpx;
		}

		&__num {
			font-family: DINNextLTPro;
			font-weight: 500;
			font-size: 38rpx;
			color: #6E4C11;
			line-height: 38rpx;
		}

		&__more {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 24rpx;
			position: absolute;
			top: 60rpx;
			right: 30rpx;
		}
	}

	.orderbox {
		width: 690rpx;
		border-radius: 30rpx;
		background-color: #fff;
		margin: 0 30rpx;

		&__top {
			width: 690rpx;
			height: 72rpx;
		}

		&__item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30rpx 0;

			&__icon {
				width: 49rpx;
				height: 49rpx;
				margin-bottom: 8rpx;
			}

			&__text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #1E1E1E;
				line-height: 24rpx;
			}
		}
	}

	.mybox {
		width: 690rpx;
		height: 124rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		margin: 22rpx 30rpx;
		display: flex;
		padding-bottom: 40rpx;
		align-items: flex-end;

		&__item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	.title {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #151515;
		line-height: 30rpx;
		padding: 36rpx 8rpx;

		&__line {
			width: 25rpx;
			height: 2rpx;
		}
	}
</style>